<template>
	<view class="container">
		<!-- 🔧 认证加载界面 -->
		<view v-if="isAuthLoading" class="auth-loading-container">
			<view class="loading-content">
				<view class="loading-icon-auth">
					<u-loading-icon mode="spinner" size="60" color="#2979ff"></u-loading-icon>
				</view>
				<text class="loading-title">正在验证身份</text>
				<text class="loading-subtitle">{{ isAuthenticated ? '正在加载签到信息...' : '正在跳转到企业微信授权...' }}</text>
			</view>
			<view class="loading-footer">
				<text class="footer-text">© 2025 中山公交集团会议签到系统</text>
			</view>
		</view>
		
		<!-- 🔧 主要内容区域 - 只有认证成功才显示 -->
		<view v-else>
			<u-transition mode="fade-up" :show="true" :duration="300">
				<view class="header">
					<text class="title">培训签到</text>
					<text class="subtitle">请查看培训信息并完成签到</text>
				</view>
			</u-transition>

		<u-skeleton :loading="loading" animate rows="4" titleWidth="70%" titleHeight="30" rowsHeight="30">
			<!-- 培训信息卡片 -->
			<view class="info-card">
				<view class="card-header">
					<view class="header-icon">
						<u-icon name="calendar" size="22" color="#ffffff"></u-icon>
					</view>
					<text class="card-title">培训信息</text>
				</view>

				<view class="info-list">
					<view class="info-item" v-show="false">
						<view class="item-icon title-icon"></view>
						<view class="item-content">
							<view class="item-label">培训名称</view>
							<view class="item-value">{{product_name}}</view>
						</view>
					</view>
					<view class="info-item">
						<view class="item-icon title-icon"></view>
						<view class="item-content">
							<view class="item-label">培训名称</view>
							<view class="item-value">{{product_name}}</view>
						</view>
					</view>

					<view class="info-item">
						<view class="item-icon type-icon"></view>
						<view class="item-content">
							<view class="item-label">培训类型</view>
							<view class="item-value">{{product_category_name}}</view>
						</view>
					</view>

					<view class="info-item">
						<view class="item-icon time-icon"></view>
						<view class="item-content">
							<view class="item-label">培训时间</view>
							<view class="item-value">{{start_time}}</view>
						</view>
					</view>

					<view class="info-item">
						<view class="item-icon location-icon"></view>
						<view class="item-content">
							<view class="item-label">培训地点</view>
							<view class="item-value">{{teach_add}}</view>
						</view>
					</view>

					<view class="info-item content-item">
						<view class="item-icon content-icon"></view>
						<view class="item-content">
							<view class="item-label">培训内容</view>
							<view class="item-value content-value">{{teach_content}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="info-card">
				<view class="card-header">
					<view class="header-icon">
						<u-icon name="calendar" size="22" color="#ffffff"></u-icon>
					</view>
					<text class="card-title">培训信息</text>
				</view>
			</view> -->


			<!-- 个人信息卡片 -->
			<view class="info-card user-card">
				<view class="card-header">
					<view class="header-icon user-icon">
						<u-icon name="account" size="22" color="#ffffff"></u-icon>
					</view>
					<text class="card-title">个人信息</text>
				</view>

				<view class="info-list">
					<view class="info-item">
						<view class="item-icon id-icon"></view>
						<view class="item-content">
							<view class="item-label">工号</view>
							<view class="item-value">{{userid}}</view>
						</view>
					</view>

					<view class="info-item">
						<view class="item-icon person-icon"></view>
						<view class="item-content">
							<view class="item-label">姓名</view>
							<view class="item-value">{{name}}</view>
						</view>
					</view>

					<view class="info-item">
						<view class="item-icon status-icon"></view>
						<view class="item-content">
							<view class="item-label">签到状态</view>
							<view class="item-value status-value">
								<view class="status-dot"
									:class="{'status-signed': sign==1, 'status-completed': sign==2}"></view>
								<text>{{sign==0 ? '未签到' : (sign==1 ? '已签到' : '已签退')}}</text>
							</view>
						</view>
					</view>

					<view class="info-item" v-if="sign > 0">
						<view class="item-icon time-icon"></view>
						<view class="item-content">
							<view class="item-label">签到时间</view>
							<view class="item-value">{{sign_time}}</view>
						</view>
					</view>
				</view>
			</view>
		</u-skeleton>

		<u-skeleton :loading="loading" animate rows="1" titleWidth="100%" rowsWidth="100%" titleHeight="80"
			rowsHeight="30">
			<view class="button-container">
				<u-transition mode="zoom" :show="true" :duration="300">
					<view v-if="sign==0" class="action-button sign-in" @click="refer">
						<u-icon name="checkmark" color="#ffffff" size="20"></u-icon>
						<text>签到</text>
					</view>
					<view v-else-if="sign==1" class="action-button sign-out" @click="refer">
						<u-icon name="checkbox-mark" color="#ffffff" size="20"></u-icon>
						<text>签退</text>
					</view>
					<view v-else class="action-button back" @click="back">
						<u-icon name="arrow-left" color="#ffffff" size="20"></u-icon>
						<text>返回</text>
					</view>
				</u-transition>
			</view>
		</u-skeleton>

			<view class="footer">
				<text class="footer-text">© 2025 中山公交集团会议签到系统</text>
			</view>

			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f7f9fc;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
		padding: 20rpx 0;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #303133;
		margin-bottom: 16rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #909399;
	}

	.info-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 0;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
		width: 100%;
	}

	/* 移除这些可能导致样式不一致的类 */
	/* .training-card {
		margin-bottom: 30rpx;
	}
	
	.user-card {
	} */

	.card-header {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		background: linear-gradient(to right, #f8f9fc, #ffffff);
		border-bottom: 1px solid #ebeef5;
	}

	.header-icon {
		width: 44rpx;
		height: 44rpx;
		border-radius: 12rpx;
		background-color: #19be6b;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 16rpx;
	}

	.user-icon {
		background-color: #2979ff;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
	}

	.info-list {
		padding: 20rpx 30rpx;
	}

	.info-item {
		display: flex;
		align-items: flex-start;
		padding: 24rpx 0;
		position: relative;
	}

	.info-item:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background-color: #f5f7fa;
	}

	.item-icon {
		width: 44rpx;
		height: 44rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
		position: relative;
		transition: all 0.3s;
	}

	.title-icon {
		background-color: rgba(0, 0, 0, 0.08);
	}

	.title-icon::before {
		content: '';
		position: absolute;
		width: 28rpx;
		height: 4rpx;
		background: #303133;
		top: 14rpx;
		left: 8rpx;
	}

	.title-icon::after {
		content: '';
		position: absolute;
		width: 18rpx;
		height: 4rpx;
		background: #303133;
		top: 24rpx;
		left: 8rpx;
	}

	.type-icon {
		background-color: rgba(25, 190, 107, 0.08);
	}

	.type-icon::before {
		content: '';
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		border: 2px solid #19be6b;
		border-radius: 4rpx;
		top: 8rpx;
		left: 8rpx;
	}

	.time-icon {
		background-color: rgba(255, 153, 0, 0.08);
	}

	.time-icon::before {
		content: '';
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		border: 2px solid #ff9900;
		border-radius: 50%;
		top: 8rpx;
		left: 8rpx;
	}

	.time-icon::after {
		content: '';
		position: absolute;
		width: 8rpx;
		height: 2rpx;
		background: #ff9900;
		top: 20rpx;
		left: 20rpx;
		transform: rotate(45deg);
		box-shadow: 0 -8rpx 0 #ff9900;
	}

	.location-icon {
		background-color: rgba(245, 108, 108, 0.08);
	}

	.location-icon::before {
		content: '';
		position: absolute;
		width: 22rpx;
		height: 22rpx;
		border: 2px solid #f56c6c;
		border-radius: 50% 50% 50% 0;
		transform: rotate(-45deg);
		top: 8rpx;
		left: 10rpx;
	}

	.location-icon::after {
		content: '';
		position: absolute;
		width: 6rpx;
		height: 6rpx;
		background: #ffffff;
		border-radius: 50%;
		top: 16rpx;
		left: 18rpx;
	}

	.content-icon {
		background-color: rgba(153, 119, 255, 0.08);
	}

	.content-icon::before {
		content: "";
		position: absolute;
		width: 24rpx;
		height: 18rpx;
		border: 2px solid #9977ff;
		border-radius: 2rpx;
		top: 12rpx;
		left: 8rpx;
	}

	.id-icon {
		background-color: rgba(64, 158, 255, 0.08);
	}

	.id-icon::before {
		content: '';
		position: absolute;
		width: 24rpx;
		height: 18rpx;
		border: 2px solid #409eff;
		border-radius: 2rpx;
		top: 12rpx;
		left: 8rpx;
	}

	.person-icon {
		background-color: rgba(144, 147, 153, 0.08);
	}

	.person-icon::before {
		content: '';
		position: absolute;
		width: 12rpx;
		height: 12rpx;
		background: #909399;
		border-radius: 50%;
		top: 8rpx;
		left: 16rpx;
	}

	.person-icon::after {
		content: '';
		position: absolute;
		width: 20rpx;
		height: 10rpx;
		border: 2px solid #909399;
		border-radius: 10rpx 10rpx 0 0;
		border-bottom: none;
		top: 22rpx;
		left: 12rpx;
	}

	.status-icon {
		background-color: rgba(144, 147, 153, 0.08);
	}

	.status-icon::before {
		content: '';
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		border: 2px solid #909399;
		border-radius: 50%;
		top: 8rpx;
		left: 8rpx;
	}

	.status-icon::after {
		content: '';
		position: absolute;
		width: 8rpx;
		height: 10rpx;
		border-right: 2px solid #909399;
		border-bottom: 2px solid #909399;
		transform: rotate(45deg);
		top: 14rpx;
		left: 16rpx;
	}

	.item-content {
		flex: 1;
	}

	.item-label {
		font-size: 26rpx;
		color: #909399;
		margin-bottom: 12rpx;
		letter-spacing: 1rpx;
	}

	.item-value {
		font-size: 32rpx;
		color: #303133;
		font-weight: 500;
		word-break: break-all;
		line-height: 1.5;
	}

	.content-item {
		align-items: flex-start;
	}

	.content-value {
		margin-top: 16rpx;
		width: 100%;
		padding: 8rpx 0;
		font-size: 28rpx;
		color: #606266;
		font-weight: normal;
		line-height: 1.6;
	}

	.status-value {
		display: flex;
		align-items: center;
	}

	.status-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #909399;
		margin-right: 10rpx;
		box-shadow: 0 0 0 4rpx rgba(144, 147, 153, 0.1);
	}

	.status-dot.status-signed {
		background-color: #2979ff;
		box-shadow: 0 0 0 4rpx rgba(41, 121, 255, 0.1);
	}

	.status-dot.status-completed {
		background-color: #19be6b;
		box-shadow: 0 0 0 4rpx rgba(25, 190, 107, 0.1);
	}

	.button-container {
		margin: 40rpx 0;
		display: flex;
		justify-content: center;
	}

	.action-button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx 60rpx;
		border-radius: 12rpx;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s;
	}

	.action-button:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.action-button text {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		margin-left: 10rpx;
		letter-spacing: 2rpx;
	}

	.sign-in {
		background-color: #2979ff;
		box-shadow: 0 8rpx 16rpx rgba(41, 121, 255, 0.2);
	}

	.sign-out {
		background-color: #2979ff;
		box-shadow: 0 8rpx 16rpx rgba(41, 121, 255, 0.2);
	}

	.back {
		background-color: #2979ff;
		box-shadow: 0 8rpx 16rpx rgba(41, 121, 255, 0.2);
	}

	.footer {
		margin-top: auto;
		padding: 40rpx 0 20rpx;
		display: flex;
		justify-content: center;
	}

	.footer-text {
		font-size: 24rpx;
		color: #c0c4cc;
	}

	/* 🔧 认证加载界面样式 - 与list.vue保持一致 */
	.auth-loading-container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f7f9fc;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
	}

	.loading-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
		margin: 40rpx;
	}

	.loading-icon-auth {
		margin-bottom: 40rpx;
	}

	.loading-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
		margin-bottom: 16rpx;
		text-align: center;
	}

	.loading-subtitle {
		font-size: 26rpx;
		color: #909399;
		text-align: center;
		line-height: 1.5;
		max-width: 400rpx;
	}

	.loading-footer {
		margin-top: auto;
		padding: 40rpx 0 20rpx;
	}
</style>

<script>
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import { mapGetters } from 'vuex';
	import authMixin from '@/mixins/authMixin.js';
	
	export default {
		name: 'TrainingSignIn',
		mixins: [authMixin],
		data() {
			return {
				isAuthLoading: true, // 🎯 认证加载状态
				show: false,
				list: [{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "请上传视频",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
					{
						type: 'success',
						title: '成功主题(带图标)',
						message: "提交成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					},
					{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "提交失败",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},
				],
				value: '',
				index: '',
				// fileList2: [],
				delivery_asn: '',
				status: "",
				is: "",
				disabled: true,
				product_name: "",
				product_category_name: "",
				userid: uni.getStorageSync("userid"),
				name: uni.getStorageSync("nickname"),
				number: '',
				teach_content: '',
				teach_add: '',
				product_content: "",
				start_time: "",
				end_time: "",
				product_org_name: "",
				ceshiData: [],
				condition: '',
				vedio: "",
				loading: '',
				id: '',
				sign_time: '',
				sign: '',
				tid: '',
				uniCloudData: [],
				uptime: '',
				refertime: '',
			}
		},
		computed: {
			// 🎯 获取认证状态
			...mapGetters([
				'isAuthenticated'
			]),
			getIcon() {
				return path => {
					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
				}
			},
		},
		components: {
			htzImageUpload,
		},
		async onLoad(option) {
			console.log("🔍 签到页面参数:", option);
			
			// 获取参数
			this.delivery_asn = option.peixunid || 811745374681;
			this.index = option.index;
			
			// 🎯 使用直接认证检查，避免显示主页
			const authResult = await this.performDirectAuth(async () => {
				// 认证成功回调 - 关闭认证加载状态，加载数据
				console.log("✅ 签到页面认证成功，加载数据");
				this.isAuthLoading = false;
				
				// 初始化数据
				this.sign_time = uni.$u.timeFormat(this.timestamp, 'yyyy-mm-dd hh:M');
				this.start();
			}, () => {
				// 认证失败回调 - 用户将被跳转到认证页面，保持loading状态
				console.log("❌ 签到页面认证失败，将跳转认证");
			});
			
			console.log("🔍 认证检查完成，结果:", authResult);
		},
		mounted() {
			this.loading = false
		},
		methods: {
			checklogin() {
				var userid = uni.getStorageSync("userid");
				this.userid = userid;
				if (typeof(userid) == "undefined" || userid == '' || userid == null) {
					window.location.href =
						"https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww44da95994e8f32c1&redirect_uri=http%3A%2F%2Fwdzbx.zsbike.com.cn%3A8300%2Fapi.v1%2FLogin&response_type=code&scope=snsapi_base&state=" +
						this.delivery_asn + "&agentid=1000196#wechat_redirect";
					return
				}
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},

			start() {

				// console.log(this.fileList2[0].url);
				// alert(123);
				uni.request({
					url: 'https://wdzbx.zsbike.com.cn:13787/api.v1/Detail?number=' + this.delivery_asn +
						'&userid=' + this.userid, //仅为示例，并非真实接口地址。
					success: (res) => {
						this.teach_content = res.data.Data.teach_content;
						this.teach_add = res.data.Data.teach_address;
						this.product_name = res.data.Data.teach_name;
						this.product_category_name = res.data.Data.category_name;
						this.id = res.data.Data.id;
						this.tid = res.data.Data.tid;
						this.number = res.data.Data.number;
						if (res.data.Data.sign == null) {
							this.sign = 0;
						} else {
							this.sign = res.data.Data.sign;
						}
						this.start_time = time(res.data.Data.start_time) + '-' + time(res.data.Data.end_time);
						this.uptime = new Date(time(res.data.Data.start_time)) - 3600000 * 2;
						if (new Date().getTime() > this.uptime) {
							this.refertime = true;
						} else {
							this.refertime = false;
						}
						//console.log(new Date().getTime());
						function time(timestamp) {
							// 时间戳 
							// let timestamp = timestamp
							// 此处时间戳以毫秒为单位
							let date = new Date(parseInt(timestamp) * 1000);
							let Year = date.getFullYear();
							let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date
								.getMonth() + 1);
							let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
							let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
							let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date
								.getMinutes());
							let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date
								.getSeconds());
							//let GMT = Year + '-' + Moth + '-' + Day;
							// let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
							let GMT = Year + '/' + Moth + '/' + Day + '/' + Hour + ':' + Minute;
							return GMT;


						}

						// this.text = 'request success';
					}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			refer() {
				uni.request({
					url: 'https://wdzbx.zsbike.com.cn:13787/api.v1/Sign?id=' + this.id + '&sign=' + this.sign +
						'&userid=' + this.userid + '&name=' + this.name + '&teach_name=' + this.product_name +
						'&tid=' + this.tid + '&number=' + this.number, //仅为示例，并非真实接口地址。
					success: (res) => {
						console.log(res.data.status);
						if (res.data.Status) {
							this.showToast(this.list[1]);
							setTimeout(() => {
								// uni.navigateBack({
								// 	delta: 1
								// });
								uni.navigateTo({
									url: "/pages/dtest/home"
								});
							}, 1000)
						} else {
							this.showToast(this.list[2])
						}
					}
				});
			},
			change(e) {
				console.log('change', e);
			},
			ceshiUploadSuccess(res) { //上传成功
				/****************
				因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
				***************/
				this.ceshiData = [];
				var _res = JSON.parse(res.data);
				console.log(_res.url);
				this.vedio = _res.url;
				this.ceshiData.push(_res.url);
				// if (_res.code == 200) {
				//     this.ceshiData.push(_res.result);
				// }
				/*******************************/
			},
		}
	}
</script>